<template>
  <div>
    <search-bar></search-bar>
    <nav-bar></nav-bar>
    <!-- <button @click="logout">退出登录</button> -->
    <div class="index-main clearfix">
      <div class="index-left">
        <div class="il-test" v-if="user.uid">
          <div class="person-info" v-if="user.uid">
            <div class="head-url">
              <img :src="user.avatar" v-imgerr/>
            </div>
            <div class="name">{{user.username}}</div>
          </div>
          <div class="person-info" v-if="!user.uid">
            请登录
          </div>
          <div class="options">
            <my-list :home="true" :homeHot="data.hot||[]"></my-list>
          </div>
        </div>
        <small-carousel :data="data.banner.filter((v, i) => i<=2)"></small-carousel>
        <adv v-for="item in data.banner.filter((v, i) => i>2)" :key="i"></adv>
        <!-- <div>
          <img :src="data.recruit"/>
        </div> -->
      </div>
      <!-- 语点征稿 -->
      <div class="index-right">
        <index-card :title="{
          title: '语点征稿',
          icon: 'ion-compose'
        }">
          <div class="ydzg" slot="content">
            <ul>
              <li v-for="item,i in data.off_task" :key="i">
                <span class="name">
                  <a :href="'#/customized/detail/'+item.id">{{item.title}}</a>
                </span>
                <span class="money">{{item.price}}语点</span>
                <span class="time">{{item.end_time ? transTime(item.end_time) : '长期'}}</span>
              </li>
            </ul>
          </div>
        </index-card>
        <!-- 悬赏定制 -->
        <index-card :title="{
          title: '悬赏定制',
          icon: 'xyd-money'
        }">
          <div class="xsdz" slot="content">
            <ul>
              <li v-for="item,i in data.task" :key="i">
                <span class="name"><a :href="'#/customized/detail/'+item.id">{{item.title}}</a></span>
                <span class="money">¥{{item.price}}</span>
              </li>
            </ul>
          </div>
        </index-card>
        <!-- 语典书城 -->
        <index-card :title="{
          title: '语典书城',
          icon: ''
        }">
          <div class="ydsc" slot="content">
            <a :href="data.book[0].page_url" v-if="data.book"><img :src="data.book[0].image_url" /></a>
          </div>
        </index-card>
        <!-- 语典达人 -->
        <index-card :title="{
          title: '语典达人',
          icon: ''
        }">
          <div class="yddr" slot="content">
            <ul>
              <li v-for="item,i in data.master" v-if="i <= 2" :key="i">
                <span class="head-url">
                  <img :src="item.owner__avatar" v-imgerr/>
                </span>
                <span class="name">{{item.owner__username}}</span>
                <span class="type">{{
                  item.owner__level === 0 ? '会员' :
                  item.owner__level === 1 ? '秀才' :
                  item.owner__level === 2 ? '解元' :
                  item.owner__level === 3 ? '会元' :
                  item.owner__level === 4 ? '探花' :
                  item.owner__level === 5 ? '榜眼' :
                  item.owner__level === 6 ? '状元' :
                  item.owner__level === 7 ? '殿阁大学士' : ''
                }}</span>
                <span class="yudian">{{item.normal}}语点</span>
              </li>
            </ul>
          </div>
        </index-card>
        <!-- 名师辅导 -->
        <index-card :title="{
          title: '名师辅导',
          icon: ''
        }">
          <div class="msfd" slot="content">
            <ul>
              <li v-for="item,i in data.teacher" :key="i" v-if="i<=3">
                <span class="head-url">
                  <img :src="item.user__avatar"/>
                </span>
                <span class="name"><a :href="'#/teacher/'+item.id">{{item.user__real_name}}</a></span>
                <span class="school">{{item.school}}</span>
              </li>
            </ul>
          </div>
        </index-card>
        <!-- 语典圆梦 -->
        <index-card :title="{
          title: '语典圆梦',
          icon: ''
        }">
          <div class="ydym" slot="content">
            <a :href="data.dream[0].page_url" v-if="data.dream"><img :src="data.dream[0].image_url"/></a>
          </div>
        </index-card>
        <!-- 同城优教 -->
        <index-card :title="{
          title: '同城优教',
          icon: ''
        }">
          <div class="tcyj" slot="content">
            <ul>
              <li v-for="item,i in data.org" :key="i">
                <span class="name"><a :href="item.org_id ? '#/school/'+item.org_id : item.page_url">{{item.name}}</a></span>
                <span class="phone">{{item.phone_no}}</span>
              </li>
            </ul>
          </div>
        </index-card>
        <!-- 名师讲堂 -->
        <index-card :title="{
          title: '名师讲堂',
          icon: ''
        }">
          <div class="msjt" slot="content">
            <ul>
              <li v-for="item,i in data.course" :key="i">
                <span class="name"><a :href="'#/teacher-course/'+item.user__id">{{item.title}}</a></span>
                <span class="teacher">主讲：{{item.user__user__real_name}}</span>
              </li>
            </ul>
          </div>
        </index-card>
        <!-- 语典好物 -->
        <index-card :title="{
          title: '语典好物',
          icon: ''
        }">
          <div class="ydhw" slot="content">
            <a :href="data.goods[0].page_url" v-if="data.goods"><img :src="data.goods[0].image_url"/></a>
          </div>
        </index-card>
        <!-- 课件 -->
        <index-card :title="{
          title: '课件',
          icon: ''
        }">
          <div class="normal-list" slot="content">
            <ul>
              <li v-for="item,i in data.cware" :key="i">
                <a :href="'#/resource/preview/'+item.id">{{item.title}}</a>
              </li>
            </ul>
          </div>
        </index-card>
        <!-- 作文课件 -->
        <index-card :title="{
          title: '作文课件',
          icon: ''
        }">
          <div class="normal-list" slot="content">
            <ul>
              <li v-for="item,i in data.cc" :key="i">
                <a :href="'#/resource/preview/'+item.id">{{item.title}}</a>
              </li>
            </ul>
          </div>
        </index-card>
        <!-- 教案 -->
        <index-card :title="{
          title: '教案',
          icon: ''
        }">
          <div class="normal-list" slot="content">
            <ul>
              <li v-for="item,i in data.tp" :key="i">
                <a :href="'#/resource/preview/'+item.id">{{item.title}}</a>
              </li>
            </ul>
          </div>
        </index-card>
        <!-- 听阅 -->
        <index-card :title="{
          title: '听阅',
          icon: ''
        }">
          <div class="normal-list" slot="content">
            <ul>
              <li v-for="item,i in data.lr" :key="i">
                <a :href="'#/resource/preview/'+item.id+'?type=listen'">{{item.title}}</a>
              </li>
            </ul>
          </div>
        </index-card>
        <!-- 作文 -->
        <index-card :title="{
          title: '作文',
          icon: ''
        }">
          <div class="normal-list" slot="content">
            <ul>
              <li v-for="item,i in data.cp" :key="i">
                <a :href="'#/resource/preview/'+item.id">{{item.title}}</a>
              </li>
            </ul>
          </div>
        </index-card>
        <!-- 修辞 -->
        <index-card :title="{
          title: '修辞',
          icon: ''
        }">
          <div class="normal-list" slot="content">
            <ul>
              <li v-for="item,i in data.rh" :key="i">
                <a :href="'#/resource/preview/'+item.id">{{item.title}}</a>
              </li>
            </ul>
          </div>
        </index-card>
        <!-- 积累 -->
        <index-card :title="{
          title: '积累',
          icon: ''
        }">
          <div class="normal-list" slot="content">
            <ul>
              <li v-for="item,i in data.fund" :key="i">
                <a :href="'#/resource/preview/'+item.id">{{item.title}}</a>
              </li>
            </ul>
          </div>
        </index-card>
        <!-- 归类复习 -->
        <index-card :title="{
          title: '归类复习',
          icon: ''
        }">
          <div class="normal-list" slot="content">
            <ul>
              <li v-for="item,i in data.cr" :key="i">
                <a :href="'#/resource/preview/'+item.id">{{item.title}}</a>
              </li>
            </ul>
          </div>
        </index-card>
        <!-- 微信文库 -->
        <index-card :title="{
          title: '微信文库',
          icon: 'xyd-wechat'
        }">
          <div class="wechat" slot="content">
            <ul>
              <li v-for="item,i in data.wechat" :key="i">
                <span class="name"><a :href="'#/wechat-lib?id='+item.id">{{item.title}}</a></span>
                <span class="head-url">
                  <img :src="item.pic" v-imgerr/>
                </span>
              </li>
            </ul>
          </div>
        </index-card>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar, SearchBar } from 'views/layout'
import { getResource, getIndex } from 'api/index'
import MyList from 'views/components/myList'
import Adv from 'views/components/adv'
import SmallCarousel from 'views/components/smallCarousel'
import IndexCard from 'views/components/indexCard'
import userImg from '@/assets/mock_images/user.jpg'
import adv1 from '@/assets/mock_images/adv1.png'
import adv2 from '@/assets/mock_images/adv3.png'
import adv3 from '@/assets/mock_images/adv4.png'
import landspace from '@/assets/mock_images/landspace.png'
import moment from 'moment'

// cc 作文课件
// cp 作文
// cr 归类复习
// cware 课件
// fund 积累
// hot 热门--首页推荐
// lr 听阅
// rh 修辞
// tp 教案
// banner 内容广告
// book 语典书城
// course 名师讲堂
// dream 语典圆梦
// goods 语典好物
// master 语典达人
// off_task 语典征稿
// org 同城优教
// recruit 招聘广告todo
// task 悬赏定制
// teacher 名师辅导
// wechat 微库

export default{
  name: 'Index',
  components: {
    NavBar,
    Adv,
    SearchBar,
    SmallCarousel,
    IndexCard,
    MyList
  },
  computed: {
    user: {
      get() {
        return this.$store.state.user
      }
    }
  },
  data() {
    return {
      userImg,
      adv1,
      adv2,
      adv3,
      landspace,
      moment,
      data: {
        banner: []
      },
      listQuery: {
        catid: 1,
        page: 1,
        offset: 5
      }
    }
  },
  created() {
    getResource()
    .then(res => {
      console.log(res)
      this.data = {
        ...this.data,
        ...res.data
      }
    })
    .catch(err => console.log(err))
    getIndex()
    .then(res => {
      console.log(res)
      this.data = {
        ...this.data,
        ...res.data
      }
    })
    .catch(err => console.log(err))
  },
  methods: {
    transTime(end_time) {
      const now = new Date()
      if (moment(end_time).dayOfYear() >= moment(now).dayOfYear()) {
        return '剩余' + (moment(end_time).dayOfYear() - moment(now).dayOfYear()) + '天'
      } else {
        return '逾期'
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import './../styles/mixin.scss';
.index-main{
  width: 1200px;
  margin: 0 auto;
  a{
    &:hover{
      text-decoration: underline;
      color: #00A2EA;
    }
  }
  .index-left{
    float: left;
    width: 210px;
    height: 800px;
    margin-right: 10px;
    .il-test{
      width: 210px;
      box-shadow: 0px 0px 20px rgba(218, 218, 218, 0.5);
      transition: all .5s;
      margin-bottom: 10px;
      &:hover {
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
      }
      .person-info{
        padding: 17px;
        .head-url{
          width: 44px;
          height: 44px;
          border-radius: 22px;
          overflow: hidden;
          display: inline-block;
          vertical-align: middle;
          >img{
            width: 44px;
            height: 44px;
          }
        }
        .name{
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .xyd-carousel-container{
      margin-bottom: 10px;
    }
  }
  .index-right{
    float: left;
    width: 990px;
    margin: -5px;
    .normal-list{
      padding: 20px;
      >ul{
        >li{
          line-height: 24px;
          @include ellipsis(280px)
        }
      }
    }
    .ydzg{
      padding: 20px;
      >ul{
        >li{
          line-height: 24px;
          >span{
            display: inline-block;
            vertical-align: middle;
          }
          .name{
            color: #666;
            @include ellipsis(140px)
          }
          .money{
            color: #FF6C2A;
            @include ellipsis(75px)
          }
          .time{
            color: #999;
          }
        }
      }
    }
    .xsdz{
      padding: 20px;
      >ul{
        >li{
          line-height: 24px;
          font-size: 0;
          -webkit-text-size-adjust: none;
          >span{
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
          }
          .name{
            color: #666;
            @include ellipsis(240px)
          }
          .money{
            color: #FF6C2A;
            @include ellipsis(40px)
          }
        }
      }
    }
    .ydsc,.ydym,.ydhw{
      img{
        width: 100%;
        height: 100%;
      }
    }
    .yddr{
      padding: 20px;
      >ul{
        >li{
          padding-bottom: 10px;
          >span{
            display: inline-block;
            vertical-align: middle;
          }
          .head-url{
            width: 30px;
            height: 30px;
            overflow: hidden;
            border-radius: 15px;
            >img{
              width: 30px;
              height: 30px;
            }
          }
          .name{
            @include ellipsis(70px)
          }
          .type{
            width: 90px;
          }
          .yudian{
            color: #999;
          }
        }
      }
    }
    .msfd{
      padding: 20px;
      >ul{
        >li{
          padding-bottom: 10px;
          >span{
            display: inline-block;
            vertical-align: middle;
          }
          .head-url{
            width: 30px;
            height: 30px;
            overflow: hidden;
            border-radius: 15px;
            >img{
              width: 30px;
              height: 30px;
            }
          }
          .name{
            @include ellipsis(100px)
          }
          .school{
            color:  #999;
          }
        }
      }
    }
    .ydym{
      >a{
        img{
          // width: 100%;
        }
      }
    }
    .tcyj{
      padding: 20px;
      >ul{
        >li{
          line-height: 24px;
          >span{
            display: inline-block;
          }
          .name{
            width: 170px;
          }
          .phone{
            color: #999;
          }
        }
      }
    }
    .msjt{
      padding: 20px;
      >ul{
        >li{
          line-height: 24px;
          >span{
            display: inline-block;
            vertical-align: middle;
          }
          .name{
            @include ellipsis(178px)
          }
          .teacher{
            @include ellipsis(98px)
            color: #999;
          }
        }
      }
    }
    .wechat{
      padding: 20px;
      >ul{
        >li{
          padding-bottom: 10px;
          >span{
            display: inline-block;
            vertical-align: middle;
          }
          .name{
            line-height: 30px;
            width: 240px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
          }
          .head-url{
            width: 30px;
            height: 30px;
            overflow: hidden;
            >img{
              width: 30px;
              height: 30px;
            }
          }
        }
      }
    }
  }
}
</style>